<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=utf-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="description" content="description of your site" />
    <meta name="author" content="author of the site" />
    <title>商品列表</title>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="../css/styles.css" />
    <link rel="stylesheet" href="../css/toastr.css" />
    <link rel="stylesheet" href="../css/fullcalendar.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/jquery.knob.js"></script>
    <script src="../js/d3.v3.min.js"></script>
    <script src="../js/jquery.sparkline.min.js"></script>
    <script src="../js/toastr.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/jquery.peity.min.js"></script>
    <script src="../js/fullcalendar.min.js"></script>
    <script src="../js/gcal.js"></script>
    <script src="../js/setup.js"></script>
    <script>
        $(function (){
            $.ajax({
                url:"findTheThirdGrade",
                dataType:"json",
                success(categories){
                    console.log(categories)
                    for (let i in categories){
                        let c = categories[i]
                        let option ="<option value='"+c.id+"'>"+c.categoryName+"</option>";
                        $(option).appendTo("#grade3");
                    }
                }
            })
        })
    </script>
    <script>
        function calMemberPrice(){
            var normalprice = document.getElementById("normalprice");
            var memberprice = document.getElementById("memberprice");
            document.getElementById("memberprice").value= normalprice.value*0.8;
        }
    </script>
</head>
<body>
<!-- header部分 -->
<%@include file="../header.jsp"%>
<div class="page">
    <div class="page-container">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <a href="#newUserModal" data-toggle="modal" class="btn pull-right">添加新商品</a>
                    <h4 class="header">商品列表</h4>
                    <form action="findByKeyWords" method="post">
                        <input type="text" name="Keywords" class="form-control" placeholder="请输入搜索关键字">&nbsp;
                        <input style="margin-top: -8px" class="btn btn-info" type="submit" value="搜索">
                    </form>
                    <table class="table table-striped sortable">
                        <thead>
                        <tr>
                            <th>商品ID</th>
                            <th>商品名称</th>
                            <th>商品描述</th>
                            <th>普通价格</th>
                            <th>会员价格</th>
                            <th>商品图片</th>
                            <th>上架日期</th>
                            <th>更新日期</th>
                            <th>所属类别</th>
                        </tr>
                        </thead>
                        <tbody>

                        <c:forEach items="${products}" var="p">
                        <tr>
                            <td>${p.id}</td>
                            <td>${p.productName}</td>
                            <td>${p.productDescription}</td>
                            <td>${p.productNormalPrice}￥</td>
                            <td>${p.productMemberPrice}￥</td>
                            <td><img src="<%=path%>/${p.productImgpath}" width="150"></td>
                            <td>${p.productCreateTime}</td>
                            <td>${p.productUpdateTime}</td>
                            <td>${p.category.categoryName}</td>
                            <td>
                                <div class="btn-group">
                                    <button class="btn">操作</button>
                                    <button data-toggle="dropdown" class="btn dropdown-toggle">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">修改</a> <a
                                                href="deleteProduct?id=${p.id}">删除</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        </c:forEach>

                        </tbody>
                    </table>
                    <div class="pagination pagination-centered">
                        <ul>
                            <li class="disabled"><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="newUserModal" class="modal hide fade">
            <div class="modal-header">
                <button type="button" data-dismiss="modal" aria-hidden="true"
                        class="close">&times;</button>
                <h3>添加新商品</h3>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="insertProducts" method="post" enctype="multipart/form-data">
                    <div class="control-group">
                        <label for="inputEmail"  class="control-label">商品名称</label>
                        <div class="controls">
                            <input id="inputEmail" name="productName" type="text" placeholder="请输入商品名称" />
                        </div>
                    </div>
                    <div class="control-group">
                        <label  class="control-label">商品描述
                        </label>
                        <div class="controls">
                            <textarea cols="20" rows="5" name="productDescription" placeholder="请输入商品描述"></textarea>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">普通价格
                        </label>
                        <div class="controls">
                            <input id="normalprice" type="text" name="productNormalPrice" onblur="calMemberPrice()"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">会员价格
                        </label>
                        <div class="controls">
                            <input id="memberprice" name="productMemberPrice" type="text" readonly="readonly"/>
                        </div>
                    </div>
                    <div>
                        <div class="control-group">
                            <label  class="control-label">商品图片
                            </label>
                            <div class="controls">
                                <input type="file" name="file" />上传图片
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label  class="control-label">商品类别
                        </label>
                        <div class="controls">
                            <select id="grade3" name="productCatagoryid">
                            </select>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <td><input class="btn btn-success" type="submit"
                                   value="添加" />&nbsp;&nbsp;&nbsp;<input class="btn btn-danger"
                                                                         type="reset" value="重置" /></td>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<%@include file="../footer.jsp"%>
</body>
</html>
